<template>
	<view class="content reg-page">
		<view class="input-group">
			<view class="input-column border-bottom-1px">
				<text class="title">姓名</text>
				<view class="input-item">
					<m-input type="text" clearable v-model="userImformation.nickname" placeholder="请输入姓名"
						:maxLength="30"></m-input>

				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">联系方式</text>
				<view class="input-item">
					<m-input type="text" clearable v-model="userImformation.tel" placeholder="请输入联系方式"
						:maxLength="30"></m-input>

				</view>
			</view>

			<view class="input-column border-bottom-1px">
				<text class="title">邮箱</text>
				<view class="input-item">
					<m-input type="text" clearable v-model="userImformation.email" placeholder="请输入邮箱"
						:maxLength="30"></m-input>
				</view>
			</view>

			<view class="input-row border-bottom-1px">
				<text class="title">性别</text>
				<radio-group @change="radioChange">
					<label class="radio">
						<radio value="男" checked="true" />
						男
					</label>
					<label class="radio">
						<radio value="女" />
						女
					</label>
				</radio-group>
			</view>
		</view>

		<view class="btn-row"><button type="primary" class="primary" @tap="update">保存</button></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import mInput from '@/components/m-input/m-input.vue'
	import mCell from '@/components/m-cell/m-cell.vue'
	import mpvuePicker from '@/components/mpvue-picker/mpvue-picker.vue'
	import cityData from '@/common/cityData.js'
	import graceChecker from '@/common/graceChecker.js'
	import mUpimg from '@/components/m-upimg/m-upimg.vue'
	import mCodedialog from '@/components/m-codedialog/m-codedialog.vue'
	import formRuleConfig from '@/config/formRule.config.js'
	export default {
		components: {
			mInput,
			mCell,
			mpvuePicker,
			mUpimg,
			mCodedialog
		},
		computed: {
			...mapState(['userInfo']),

		},

		data() {

			return {
				userImformation: {
					id: "",
					username: "",
					tel: '',
					nickname: '',
					email: ''
				}
			}
		},
		onLoad() {
			this.userImformation.id = this.userInfo.id
			this.userImformation.username = this.userInfo.username
			this.userImformation.nickname = this.userInfo.nickname
			this.userImformation.tel = this.userInfo.tel
			this.userImformation.email = this.userInfo.email
		},
		methods: {

			// 更新
			async update() {
				let checkRes = graceChecker.check(this.userImformation, formRuleConfig.userBaseRule)
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: 'none'
					})
					return
				}
				let res = null
				if (!this.userInfo.id) {
					uni.showToast({
						title: '请登录后修改',
						icon: 'none',
						duration: 1000
					})
				}
				res = await this.$apis.updateUser(this.userImformation)

				if (res) {
					uni.showToast({
						title: '修改成功',
						icon: 'success',
						duration: 2000
					})
					
					//更新信息
					let userInfo = await this.$apis.getUserInfo();
					console.log("用户信息", userInfo);
					this.$store.commit("SET_USERINFO", userInfo.data)
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-group {
		border-radius: 10upx;
		margin-top: 10upx;
		overflow: hidden;
	}

	.input-row {
		display: flex;
		flex-direction: row;
		position: relative;
		background: #fff;
		justify-content: space-between;
		align-items: center;
		padding: 15upx 10upx;
	}

	.input-row .title {
		width: 25%;
		padding: 20upx 0;
		padding-left: 20upx;
		line-height: 50upx;
	}

	.border-bottom-1px {
		position: relative;

		&::after {
			position: absolute;
			z-index: 1;
			right: 0;
			bottom: 0;
			left: 20upx;
			height: 1upx;
			content: '';
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			background-color: #e2e2e2;
		}
	}

	.header {
		display: flex;
		flex-direction: column;

		.tip {
			font-size: $uni-font-size-sm;
			color: $font-color-666;
			margin-left: 20upx;
		}
	}

	.head-img {
		margin-right: 15upx;

		image {
			width: 160upx;
			height: 160upx;
			border-radius: 50%;
		}
	}

	radio-group {
		margin-right: 10upx;
	}

	.radio {
		margin-left: 20upx;
	}

	.input-column {
		display: flex;
		flex-direction: column;
		background-color: $bgcolor_white;
		padding: 30upx 20upx 10upx 20upx;

		.title {
			margin-left: 10upx;
		}

		.input-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.picker {
			padding: 30upx 0 20upx 0;
			margin-left: 10upx;
			position: relative;

			picker {
				font-size: $uni-font-size-lg;
				width: 100%;
				position: absolute;
			}
		}

		.yzb-next {
			float: right;
			color: $font-color-999;
		}
	}

	.content {
		background: $bgcolor_white;
	}

	.btn-row {
		position: fixed;
		bottom: 10upx;
		width: 100%;
		box-sizing: border-box;

		button {
			background-color: $main-color;
			height: 90upx;
			line-height: 90upx;
			font-size: $font-size-34;
		}
	}
</style>